<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/pages/user/myCar.css" />
		<title></title>
	</head>
	<body>
		<div class="loading-warpper" id="loading">
			<div class="loading">
				<div class="item1"></div>
				<div class="item2"></div>
			</div>
		</div>
		<div id="app">
			<header class="mui-bar mui-bar-nav">
				<!-- <div id="header"></div> -->
				<div class="header">
					<a class="mui-action-back mui-icon mui-icon mui-icon-arrowleft"></a>
					<h1 class="mui-title">管理子账号</h1>
					<div class="mui-right" @click="addCarTap">绑定子账号</div>
				</div>
			</header>
			<div class="mui-content">
				<div id="body">
					<ul class="mui-table-view" v-if="list.length > 0">
						<li class="mui-table-view-cell" v-for="item in list">
							<div class="mui-slider-right mui-disabled">
								<a class="mui-btn mui-btn-red" @click="deleteTap(item)">删除</a>
							</div>
							<div class="mui-slider-handle">
								<div>
									<div class="font-16 font-c-7f" v-text="item.userName"></div>
								</div>
							</div>
						</li>
					</ul>
					<div v-if="list.length == 0" class="font-14 font-c-ad p-30" style="text-align: center;">-- 请先添加子账号 --</div>
				</div>
			</div>
		</div>
		<script src="../js/Width.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				// Util.StatusbarHeight('header')
				// Util.StatusbarHeight('body')
				GetChildAccounts() // 获取车辆列表
			})

			window.addEventListener('issueBack', function(msg) {
				//自定义方法，刷新数据，不刷新页面
				GetChildAccounts() // 获取车辆列表
			})
			
			var app = new Vue({
				el: "#app",
				data: {
					list: []
				},
				methods: {
					addCarTap: function() {
						var that = this;
						plus.nativeUI.prompt("输入需要关联的手机号", function(e) {
							 if (e.index == 0) {
								 that.addChild(e.value)
							 }
						}, "绑定手机号", '', ["确定", "取消"]);
					},
					
					deleteTap: function(item) {
						plus.nativeUI.confirm("您确定要删除该账户吗？", function(e) {
							if (e.index == 0) {
								mui.post(Util.HTTP + 'api/Users/DeleteChildAccounts', {
									userID: item.userID
								}, function(res) {
									mui.toast(res.message)
									if (res.code == 1001) {
										GetChildAccounts() 
									}
								})
							}
						})
					},
					addChild(userPhone) {
						mui.post(Util.HTTP + 'api/Users/AddChildAccounts',{
							userID: Util.getState('$state').userID,
							userName: userPhone
						},function(res){
							
							mui.toast(res.message)
							if(res.code == 1001) {
								GetChildAccounts()
							}
						})
					}
				}
			})

			function GetChildAccounts() {
				mui.post(Util.HTTP + 'api/Users/GetChildAccounts', {
					userID: Util.getState('$state').userID
				}, function(res) {
					if (res.code == 1001) {
						setTimeout(function() {
							document.getElementById('loading').style.display = 'none'
						}, 500)
						app.list = res.data
					} else {
						mui.toast(res.message)
					}
				})
			}
		</script>
	</body>
</html>
